<template>
  <a-card :loading="loading" :title="$t('hotel_id') + ': ' + hotelInfo.hotelId">
    <template #extra>
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="saveHotel()" v-if="hotelInfo.hotelStatus">
          {{ $t('save_info') }}
        </a-button>
        <a-button type="primary" v-if="hotelInfo.hotelStatus" @click="openSearchRate()">
          {{ $t('search_price') }}
        </a-button>
        <a-popconfirm :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No"
                      @confirm="deleteHotel()" v-if="hotelInfo.hotelStatus">
          <a-icon slot="icon" type="question-circle-o" style="color: red"/>
          <a-button type="danger" :loading="submitLoading">
            {{ $t("delete") }}
          </a-button>
        </a-popconfirm>
      </a-space>
    </template>
    <a-form-model ref="hotelInfoForm" :model="hotelInfo" layout="vertical" :rules="hotelInfoFormRules" autocomplete="off">
      <a-row :gutter="[16,0]" justify="center">
        <a-col :span="10">
          <a-form-model-item :label="$t('hotel_name')+'EN'" prop="hotelNameEn">
            <a-input v-model="hotelInfo.hotelNameEn"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item :label="$t('hotel_name')+'CN'" prop="hotelNameCn">
            <a-input v-model="hotelInfo.hotelNameCn"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('hotel_star')" prop="hotelStar">
            <a-select v-model="hotelInfo.hotelStar">
              <a-select-option value="0">0 {{ $t('star') }}</a-select-option>
              <a-select-option value="1">1 {{ $t('star') }}</a-select-option>
              <a-select-option value="2">2 {{ $t('star') }}</a-select-option>
              <a-select-option value="3">3 {{ $t('star') }}</a-select-option>
              <a-select-option value="4">4 {{ $t('star') }}</a-select-option>
              <a-select-option value="5">5 {{ $t('star') }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :label="$t('country')" prop="countryCode">
            <a-auto-complete :data-source="countryList" v-model="hotelInfo.countryCode" :allowClear="true"
                             :filter-option="filterOption" @select="countrySelect" @change="countryChange" :placeholder="hotelInfo.countryName"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :label="$t('province')" prop="provinceName">
            <a-input v-model="hotelInfo.provinceName"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :label="$t('city')" prop="cityCode">
            <a-auto-complete :data-source="cityList" v-model="hotelInfo.cityCode" :filter-option="filterOption"
                             :defaultOpen="false" :allowClear="true" :placeholder="hotelInfo.cityName"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :label="$t('zone')" prop="zoneName">
            <a-input v-model="hotelInfo.zoneName"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item :label="$t('address')+'EN'" prop="hotelAddressEn">
            <a-input v-model="hotelInfo.hotelAddressEn"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item :label="$t('address')+'CN'" prop="hotelAddressCn">
            <a-input v-model="hotelInfo.hotelAddressCn"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('postalcode')" prop="postalcode">
            <a-input v-model="hotelInfo.postalcode"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('longitude')" prop="hotelLongitude">
            <a-input v-model="hotelInfo.hotelLongitude"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('latitude')" prop="hotelLatitude">
            <a-input v-model="hotelInfo.hotelLatitude"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('tel')" prop="hotelTel">
            <a-input v-model="hotelInfo.hotelTel"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :label="$t('fax')" prop="hotelFax">
            <a-input v-model="hotelInfo.hotelFax"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item label="Email" prop="hotelEmail">
            <a-input v-model="hotelInfo.hotelEmail" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item label="Web" prop="hotelWeb">
            <a-input v-model="hotelInfo.hotelWeb"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import {getHotel,updateHotel,deleteHotel} from '@/services/hotel'
import {getPublicData, getCityList} from '@/services/public'

export default {
  name: "HotelInfo",
  props: ['HotelId'],
  i18n: require('../i18n'),
  data() {
    return {
      hotelInfo: {},
      hotelInfoFormRules:{
        hotelNameEn: [{required: true, trigger: 'blur',message: ' '}],
        hotelNameCn: [{required: true, trigger: 'blur',message:' '}],
        hotelAddressEn: [{required: true, trigger: 'blur',message:' '}],
        hotelAddressCn: [{required: true, trigger: 'blur',message:' '}],
        countryCode: [{required: true, trigger: 'blur',message:' '}],
        cityCode: [{required: true, trigger: 'blur',message:' '}],
      },
      countryList: [],
      cityList: [],
      loading: false,
      submitLoading: false,
    }
  },
  methods: {
    getData() {
      this.loading = true
      if (this.$props.HotelId > 0) {
        getHotel(this.$props.HotelId).then(res => {
          this.hotelInfo = res.data.data
          this.loading = false
          this.countrySelect(this.hotelInfo.countryCode)
          if(this.hotelInfo.countryCode != "CN" && this.hotelInfo.countryCode != "HK" && this.hotelInfo.countryCode != "TW" && this.hotelInfo.countryCode != "MO") {
            delete this.hotelInfoFormRules.hotelNameCn
            delete this.hotelInfoFormRules.hotelAddressCn
          }
        }).catch(error => {
          console.log(error)
        })
      }
      getPublicData('coun').then(res => {
        const {countryList} = res.data
        countryList.forEach(item => {
          this.countryList.push({text: item.countryNameEn + ' ' + item.countryNameCn, value: item.countryCode})
        })
      }).catch(error => {
        console.log(error)
      })
    },
    countrySelect(value) {
      this.cityList = []
      getCityList(value).then(res => {
        res.data.forEach(item => {
          this.cityList.push({text: item.cityNameEn + ' ' + item.cityNameCn, value: item.cityCode})
        })
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    countryChange() {
      this.cityList = []
    },
    saveHotel(){
      console.log(this.hotelInfo)
      this.$refs.hotelInfoForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          updateHotel(this.hotelInfo).then(res => {
            if(res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
              this.submitLoading = false
            }else{
              this.$message.error({content: this.$t(res.data.message)})
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          return false;
        }
      });
    },
    deleteHotel(){
      this.submitLoading = true
      deleteHotel(this.hotelInfo.hotelId).then(res => {
        if(res.data.success) {
          this.$message.success({content: this.$t('deleteSuccess')})
          this.getData()
          this.submitLoading = false
        }else{
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
    openSearchRate(){
      this.$openPage('/hotel/booking/' + this.hotelInfo.hotelId, this.$t('search_price') + "[" + this.hotelInfo.hotelId + "]")
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
  },
  created() {
    this.getData()
  }
}
</script>